<template>
  <el-dialog title="转移余额" v-model="state.dialogVisible" width="500" center>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left" @close="beforeClose">
      <el-form-item label="目标经销商" prop="dealerId">
        <el-select v-model="form.dealerId" placeholder="请选择经销商" filterable>
          <el-option
            v-for="(item, index) in state.dealerOptions"
            :key="item.id"
            :value="item.id"
            :label="item.dealerName"
            >{{ item.dealerName }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item label="转账金额" prop="amount">
        <el-input-number
          v-model="form.amount"
          maxlength="10"
          style="width: 220px"
          @change="form.amount = Math.abs(form.amount)"
        ></el-input-number>
        <div class="mt-4 flex">
          <div class="mr-4">当前余额：{{ state.data.balance }}</div>
          <el-button type="primary" link @click="handleAll">所有余额</el-button>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="state.dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleOk">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
import { postAccountTransfer } from '@/api/shop'

const state = reactive({
  dialogVisible: false,
  dealerOptions: [],
})
const emit = defineEmits(['update:visible', 'ok'])
const form = reactive({
  dealerId: '',
  amount: 0,
})

function validateFormValueOptions(rule, value, callback) {
  if (value) {
    if (value >= 0.01) {
      callback()
    } else {
      callback(new Error('金额不能小于0.01'))
    }
  } else {
    callback(new Error('请输入金额'))
  }
}
const rules = reactive({
  dealerId: [{ required: true, message: '请选择经销商', trigger: 'change' }],
  amount: [{ required: true, validator: validateFormValueOptions, trigger: 'blur' }],
})
const formRef = ref(null)
function show(data, list) {
  state.dialogVisible = true
  state.data = data
  state.dealerOptions = list
  form.dealerId = ''
  form.amount = 0
  formRef.value.resetFields()
}

function beforeClose() {
  console.log('beforeClose')
  state.dealerOptions = []
}
function close() {
  state.dialogVisible = false
}

function handleAll() {
  form.amount = state.data.balance
}

function handleOk() {
  formRef.value.validate((valid) => {
    if (valid) {
      // state.dialogVisible = false;
      const target = state.dealerOptions.find((item) => item.id === form.dealerId)
      postAccountTransfer({
        sourceShopId: state.data.shopId,
        sourceDealId: state.data.dealerId,
        targetShopId: target.shopId,
        targetDealId: target.dealerId,
        amount: form.amount,
      }).then((res) => {
        ElMessage({
          message: '操作成功',
          type: 'success',
        })
        close()
        emit('ok', form)
      })
    }
  })
}

defineExpose({
  show,
  close,
})
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
